<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../Ajs/vue.js"></script>
</head>
<body>

<div id="warp" :style="{fontSize:fs+'px'}">
    父组件内容
<!--    父组件监听子组件的事件-->
    <menu-item :menu-title="title" @enlarge-text="fn($event)"></menu-item>
</div>

<script>
    //子组件向父组件传值--基本用法


    //我们直接使用props 来操作修改父组件的值是不赞同的
    //props传递的原则--单项数据

    //我们可以使用子组件通过 $emit() 自定义事件向父组件传递信息
    Vue.component("menu-item",{
        props:['menuTitle'],
        template:"<div><div>{{menuTitle}}</div><button @click='$emit(\"enlarge-text\",5)'>父组件文字变大</button></div>"
    });

    new Vue({
        el:"#warp",
        data:{
            title:"123",
            fs:10
        },
        methods:{
            fn:function(num){
                console.log(num);
                this.fs += 1;
            }
        }
    })
</script>
</body>
</html>
